<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">系统日志</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>系统日志</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
        
        	<div class="layui-inline">
        		搜索：
        		<div class="layui-input-inline">
	        		<select id="log-search-key">
		                <option value="">-请选择-</option>
		                <option value="message">日志信息</option>
		                <option value="logLevel">日志级别</option>
		                <option value="appName">应用名</option>
		                <option value="classname">类名</option>
		                <option value="contextTraceId">上下文跟踪号</option>
		                <option value="currentTraceId">当前跟踪号</option>
	            	</select>&emsp;
        		</div>
        	</div>
            <div class="layui-inline">
            	<input id="log-search-value" class="layui-input search-input" type="text" placeholder="输入关键字"/>&emsp;
            </div>
            <div class="layui-inline">
            	开始时间: 
            	<div class="layui-input-inline">	
            		<input type="text" id="startDate" class="layui-input search-input" type="text">
            	</div>
            </div>
            
            <div class="layui-inline">
            	结束时间: 
            	<div class="layui-input-inline">	
            		<input type="text" id="endDate" class="layui-input search-input" type="text">
            	</div>
            </div>
            
            <div class="layui-inline">
            	<button id="log-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            </div>
        </div>

        <table class="layui-table" id="log-table" lay-filter="log-table"></table>
    </div>
</div>

<script>
    layui.use(['form', 'table', 'util', 'config', 'admin', 'upload' ,'laydate'], function () {
        var table = layui.table;
        var config = layui.config;
        var util = layui.util;
        var laydate = layui.laydate ;


		laydate.render({
   			elem: '#startDate',
   			type: 'datetime'
   		});
   		 
   		laydate.render({
   			elem: '#endDate',
   			type: 'datetime'
   		});

        // 渲染表格
        table.render({
            elem: '#log-table',
            url: config.base_server + 'api-log/sysLog',
            method: 'GET',
            where: {
                access_token: config.getToken().access_token
            },
            page: true,
            cols: [[
                {type: 'numbers'},
                {
                    field: 'timestamp', width: 200, sort: true, templet: function (d) {
                        return util.toDateString(d.timestamp, 'yyyy-MM-dd HH:mm:ss');
                    }, title: '日志时间'
                },
                {field: 'contextTraceId', sort: true, title: '上下文跟踪号', width: 150},
                {field: 'currentTraceId', sort: true, title: '当前跟踪号', width: 150},
                {field: 'message', sort: true, title: '日志信息', width: 350},
                {field: 'logLevel', sort: true, title: '日志级别', width: 100},
                {field: 'appName', sort: true, title: '应用名', width: 120},
                {field: 'serverIp', sort: true, title: '服务ip', width: 130},
                {field: 'serverPort', sort: true, title: '服务端口', width: 100},
                {field: 'threadName', sort: true, title: '线程名', width: 150},
                {field: 'classname', sort: true, title: '类名', width: 250}
                
            ]]
        });

        $("#log-table tr>td").hover(function(){
            $(this).attr("title", $(this).text());
        });

        // 搜索按钮点击事件
        $('#log-btn-search').click(function () {
            var key = $('#log-search-key').val();
            var value = $('#log-search-value').val();
            var startDate = $('#startDate').val();
            var endDate = $('#endDate').val();
            
            table.reload('log-table', {where: {searchKey: key, searchValue:value ,startDate:startDate,endDate:endDate}});
        });
    });
</script>